<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>    
    <head>        
        <title>Add Listing</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content="Edit Listing" />
        
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>        
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>
        
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/page/listingform_mobile.js"></script> 

        <%@ include file="include/listingadd_mobile_incl.jsp" %> 
        
        <link rel="stylesheet" href="css/bootstrap/prettify.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap/index.css" rel="stylesheet">
        
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/bootstrap/bootstrap-wysiwyg.js"></script>
        <script src="js/bootstrap/jquery.hotkeys.js"></script>
        
        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        <script type="text/javascript">
            $(function() {
                $('#editor').wysiwyg();
            });            
            function submitListing() {
                var desc = $('#editor').html();
                $('#listing-description').val(desc);     
                $("form#listing-form").submit();
            }
        </script>
        
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>

    </head>

    <body>
        <div data-role="page" data-theme="d">

            <%@include file="header_mobile.jsp" %>
            
            <div data-role="header" data-theme="a">
                <p style="color: #ffffff; font-size: 20px; text-align: center;">Add New Property</p>   
            </div>
            
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Basic Info</p>   
            </div>
            
            
            <form id="listing-form" action="listing.htm" method="post" data-ajax="false">
                
            <div data-role="content" style="background-color: #ffffff">
                 <table style="width: 100%;">
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">I am posting this as a ...</span>
                            <select id="listing-posterType" name="posterTypeID" style="width:200px; padding: 5px;">
                                <option value="0">-- Choose one --</option>
                                <option value="1" selected>Land Owner</option>
                                <option value="2">Agent</option>
                                <option value="3">Broker</option>
                                <option value="4">Property Manager</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Choose a property type.</span>
                            <select id="listing-propertyType" name="propertyTypeID">
                                <option value="0">-- Choose property type --</option>
                                <option value="2" selected>Condominium</option>
                                <option value="3">Apartment</option>
                                <option value="4">Townhouse</option>
                                <option value="1">House</option>
                                <option value="5">Room</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Choose rental terms.</span>
                            <fieldset data-role="controlgroup" style="width: 100%">
                                <c:if test="${model.listing.leaseLongTerm}"> 
                                    <input type="checkbox" id="listing-leaseLongTerm" name="leaseLongTerm" value="1" checked="checked" class="custom" /><label for="listing-leaseLongTerm">For Long Term</label>                                                             
                                </c:if>
                                <c:if test="${!model.listing.leaseLongTerm}">         
                                    <input type="checkbox" id="listing-leaseLongTerm" name="leaseLongTerm" value="1" class="custom" /><label for="listing-leaseLongTerm">For Long Term</label>                                                       
                                </c:if>
                                <c:if test="${model.listing.leaseShortTerm}">
                                    <input type="checkbox" id="listing-leaseShortTerm" name="leaseShortTerm" value="1" checked="checked" class="custom" /><label for="listing-leaseShortTerm">For Short Term</label>
                                </c:if>                                                            
                                <c:if test="${!model.listing.leaseShortTerm}">
                                    <input type="checkbox" id="listing-leaseShortTerm" name="leaseShortTerm" value="1" class="custom" /><label for="listing-leaseShortTerm">For Short Term</label>
                                </c:if>    
                            </fieldset>
                            <span style="color: gray; font-style: italic; font-size:12px;">                                                                
                                <p>Long term rentals span from 6 months minimum to more than a year.</p>
                                <p>Short term rentals are on a daily basis, weekly, or monthly but are less than 6 months.</p>
                             </span>
                        </td>
                    </tr>
                </table>
            </div>
            
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Long Term Rental Rates</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">
                <table style="width:100%">
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Monthly rate, long term - &#8369;</span>
                            <input id="listing-longMonthRate" type="text" name="longMonthRate" placeholder="&#8369;" style="width: 100%" value=""/>
                        </td>
                    </tr>
                </table>                
            </div>
                  
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Short Term Rental Rates</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">
                <table style="width:100%"> 
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Daily rate, short term - &#8369;</span>
                            <input id="listing-shortDayRate" type="text" name="shortDayRate" placeholder="&#8369;" style="width: 100%" value=""/> 
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Weekly rate, short term - &#8369;</span>
                            <input id="listing-shortWeekRate" type="text" name="shortWeekRate" placeholder="&#8369;" style="width: 100%" value=""/> 
                        </td>
                    </tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Monthly rate, short term - &#8369;</span>
                            <input id="listing-shortMonthRate" type="text" name="shortMonthRate" placeholder="&#8369;" style="width: 100%" value=""/> 
                        </td>
                    </tr>
                </table>                
            </div>            
                        
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Location and Address</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">
                
                <input id="address" type="text" name="address" style="width:400px; padding: 5px; display: none" value=""/>

                <table style="width:100%">

                    <tr>
                        <td colspan="2">
                            <span style="color: gray; font-style: italic; font-size:12px;">Name of village or building &nbsp; (required)</span>
                            <input id="listing-structure" type="text" name="structure" style="width:100%;" data-clear-btn="true" placeholder="" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span style="color: gray; font-style: italic; font-size:12px;">On what floor is this property in?</span>
                            <input id="listing-floor" type="text" name="floor" style="width:100%;" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span style="color: gray; font-style: italic; font-size:12px;">House or unit number.</span>
                            <input id="listing-number" type="text" name="number" style="width:100%;" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span style="color: gray; font-style: italic; font-size:12px;">Street address. &nbsp; (required)</span>
                            <input id="listing-street" type="text" name="street" style="width:100%;" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td>                            
                            <span style="color: gray; font-style: italic; font-size:12px;">City. &nbsp; (required)</span>
                            <select id="listing-city" name="city" style="width:200px; padding: 5px;">
                                <option value="" selected>--- Choose One ---</option>
                                <option value="Makati">Makati</option>
                                <option value="Taguig">Taguig</option>
                                <option value="Mandaluyong">Mandaluyong</option>
                                <option value="Pasig">Pasig</option>
                                <option value="Quezon City">Quezon City</option>
                                <option value="Manila">Manila</option>
                                <option value="Pasay">Pasay</option>
                                <option value="Paranaque">Paranaque</option>
                                <option value="Muntinlupa">Muntinlupa</option>
                                <option value="San Juan">San Juan</option>
                                <option value="Cebu">Cebu</option>
                            </select>
                        </td>
                    </tr> 
                    <tr>
                        <td></td>
                        <td>
                            <input type="hidden" name="region" value="Metro Manila"/>
                            <input type="hidden" name="country" value="Philippines"/>
                        </td>
                    </tr>
                </table>
            </div>
            
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Property Details</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">
                 <table style="width: 100%">                                                    
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Area in sqm &nbsp; (required)</span>
                            <input id="listing-sqArea" type="text" name="sqArea" style="width:100%" value=""/> 
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Bedrooms.</span>
                            <select id="listing-numBedrooms" name="numBedrooms" style="width:100%">
                                <option value="0" selected="selected">none</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Bathrooms.</span>
                            <select id="listing-numBathrooms" name="numBathrooms" style="width:100%;">                                
                                <option value="0" selected="selected">none</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </td>
                    </tr>                                                                            
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Furnishing. &nbsp; (required)</span>
                            <select id="listing-furnishing" name="furnishTypeID" style="width: 100%;">
                                <option value="0" selected>-- Choose one --</option>
                                <option value="1">Unfurnished</option>
                                <option value="2">Semi Furnished</option>
                                <option value="3">Fully Furnished</option>
                            </select>
                        </td>
                        <td>                 
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
            
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Amenities</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">
                <input id="amenityIDs" name="amenityIDs" type="hidden" />
                <fieldset data-role="controlgroup" style="width: 100%">
                    <c:forEach items="${model.amenities}" var="amenity">
                        <div style="padding:0px;">
                            <input id="amenity-${amenity.id}" type="checkbox" name="amenitycbx" value="${amenity.id}" onclick="checkAmenities()"/> <label for="amenity-${amenity.id}">${amenity.title}</label>
                        </div>
                    </c:forEach>
                </fieldset>
            </div>
                        
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Additional Info</p>   
            </div>
            
            <div data-role="content" style="background-color: #ffffff">                 
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Title of ad. &nbsp; (required)</span>
                            <input id="listing-title" type="text" name="title" style="width:100%;" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color: gray; font-style: italic; font-size:12px;">Description. One or two-liner descriptions would do :)</span>
                            <div style="width: 100%">
                                <div id="editor"></div>
                            </div>
                            <textarea id="listing-description" name="description" style="width: 100%; display:none;"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="a" value="3" />
                            <input type="hidden" name="s" value="1" />
                            <a href="#" data-role="button" onclick="submitListing()" data-theme="a">Add Property</a>
                        </td>
                    </tr>
                </table>
            </div>
                            
            </form>
                            
            <br>
            
            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

        </div>
    </body>
</html>
